<template>
  <page-layout :title="headContent.custFullName"
               :logo="logo"
               :show-breadcrumb="false">
    <yq-page-head-content ref="pageContent" slot="headerContent" :head-content="headContent" :head-content-columns="headContentColumns"/>
    <yq-page-head-extra ref="pageExtra" slot="extra" :head-content="headContent" :head-extra-columns="headExtraColumns"/>
    <a-divider style="margin: 1px"/>
    <a-divider style="margin: 1px"/>
    <!-- actions -->
    <template slot="action">
      <a-button-group style="margin-right: 4px;">
        <a-button @click="handleEdit(headContent)">编辑</a-button>
        <a-button>
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link">
              <a-icon type="ellipsis"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(headContent.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a-button>
      </a-button-group>
      <template>
        <a-button type="primary" @click="changeTradeStatus">更改成交状态</a-button>
        <j-modal
          title="客户成交状态"
          :width="400"
          :visible="tradeStatusVisible"
          switchFullscreen
          @ok="submitTradeStatus"
          :okButtonProps="{ class:{'jee-hidden': false} }"
          @cancel="handleCancelTradeStatus"
          cancelText="关闭">
          <a-spin :spinning="tradeStatusConfirm">
            <a-form-model ref="tradeStatusForm">
              <a-row>
                <a-col :span="24">
                  <a-form-model-item label="成交状态" :labelCol="{ xs: { span: 24 }, sm: { span: 5 }}"  :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 }}" prop="tradeStatusCode">
                    <j-dict-select-tag type="list" v-model="headContent.tradeStatusCode" dictCode="mdm_trade_status" placeholder="请选择成交状态" />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </a-spin>
        </j-modal>
      </template>
    </template>
    <a-tabs type="card"  @change="callback">
      <a-tab-pane key="1" tab="详细资料">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          <detail-list title="┃ 基本信息" size="small" class="tab-detail-layout" :col="3" style="margin-bottom: 10px">
            <detail-list-item term="客户名称">{{headContent.custFullName}}</detail-list-item>
            <detail-list-item term="客户简称">{{headContent.custShortName}}</detail-list-item>
            <detail-list-item term="客户来源">{{headContent.custSource_dictText}}</detail-list-item>
            <detail-list-item term="客户级别">{{headContent.custLevel_dictText}}</detail-list-item>
            <detail-list-item term="省市区">
              <j-ellipsis :value="pcaData.getText(headContent.administrativeArea)" :length="12"/>
            </detail-list-item>
            <detail-list-item term="详细地址">{{headContent.custAddress}}</detail-list-item>
            <detail-list-item term="销售区域">{{headContent.custSaleArea}}</detail-list-item>
            <detail-list-item term="备注">{{headContent.remark}}</detail-list-item>
          </detail-list>

          <detail-list title="┃ 开票信息" size="small" class="tab-detail-layout" :col="3" style="margin-bottom: 10px">
            <detail-list-item term="开户银行">{{headContent.invBankName}}</detail-list-item>
            <detail-list-item term="银行账号">{{headContent.invBankNo}}</detail-list-item>
            <detail-list-item term="地址">{{headContent.invAddr}}</detail-list-item>
            <detail-list-item term="纳税人识别号">{{headContent.invTaxNo}}</detail-list-item>
            <detail-list-item term="电话">{{headContent.invTel}}</detail-list-item>
          </detail-list>

          <detail-list title="┃ 其它信息" size="small" class="tab-detail-layout" :col="3" style="margin-bottom: 10px">
            <detail-list-item term="客户编码">{{headContent.custNo}}</detail-list-item>
            <detail-list-item term="成立时间">{{headContent.custSetTime}}</detail-list-item>
            <detail-list-item term="注册资金">{{headContent.custRegistCapital}}</detail-list-item>
            <detail-list-item term="经营范围">{{headContent.cateScope}}</detail-list-item>
            <detail-list-item term="成交状态">{{headContent.tradeStatusCode_dictText}}</detail-list-item>
            <detail-list-item term="客户行业">{{headContent.cateTypeCode_dictText}}</detail-list-item>
            <detail-list-item term="企业性质">{{headContent.entTypeCode_dictText}}</detail-list-item>
            <detail-list-item term="网址">{{headContent.custWebSite}}</detail-list-item>
            <detail-list-item term="邮编">{{headContent.postCode}}</detail-list-item>
            <detail-list-item term="Email">{{headContent.email}}</detail-list-item>
            <detail-list-item term="国别">{{headContent.custNationCode_dictText}}</detail-list-item>
            <detail-list-item term="上级单位">{{headContent.custParentUnit_dictText}}</detail-list-item>
          </detail-list>

          <detail-list title="┃ 系统信息" size="small" class="tab-detail-layout" :col="3" style="margin-bottom: 10px">
            <detail-list-item term="负责人">{{headContent.owner_dictText}}</detail-list-item>
            <detail-list-item term="负责人所在部门">{{headContent.ownerDept_dictText}}</detail-list-item>
            <detail-list-item term="创建人">{{headContent.createBy}}</detail-list-item>
            <detail-list-item term="创建时间">{{headContent.createTime}}</detail-list-item>
            <detail-list-item term="更新人">{{headContent.updateBy}}</detail-list-item>
            <detail-list-item term="更新时间">{{headContent.updateTime}}</detail-list-item>
          </detail-list>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2" tab="附件">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}">
          <j-upload v-model="headContent.file" text="附件上传" @change="uploadFile" />
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="3" tab="联系人" v-if="hasPermissionTab('customer:contactsTable')">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          <mdm-customer-contacts-table
            ref="contactsTable"
            :init-query-param="{customerId: this.headContent.id}"
            :init-add-model="{customerId: this.headContent.id, customerId_dictText: this.headContent.custFullName}"
          ></mdm-customer-contacts-table>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="4" tab="项目" v-if="hasPermissionTab('customer:quoteProjectTable')">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          <quote-project-table ref="quoteProjectTable" :init-query-param="{customerId: this.headContent.id}"/>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="5" tab="报价单" v-if="hasPermissionTab('customer:quoteProductTable')">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          <quote-product-table ref="quoteProductTable" :init-query-param="{customerId: this.headContent.id}"/>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="6" tab="销售合同" v-if="hasPermissionTab('customer:contractTable')">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          <sd-contract-table ref="contractTable" :init-query-param="{customerId: this.headContent.id}"/>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="7" tab="销售订单" v-if="hasPermissionTab('customer:salesDetailTable')">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          <sd-sales-detail-table ref="salesDetailTable" :init-query-param="{customerId: this.headContent.id}"/>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="8" tab="销售退货单" v-if="hasPermissionTab('customer:salesReturnTable')">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          <sd-sales-return-table ref="salesReturnTable" :init-query-param="{customerId: this.headContent.id}"/>
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </page-layout>
</template>

<script>
  import {mixinDevice} from '@/utils/mixin.js'
  import PageLayout from '@/components/page/PageLayout'
  import DetailList from '@/components/tools/DetailList'
  import {putAction} from "@/api/manage";
  import Area from '@/components/_util/Area'
  const DetailListItem = DetailList.Item
  import MdmCustomerContactsTable from '@/views/mdm/customerContacts/MdmCustomerContactsTable'
  import QuoteProjectTable from "@/views/ebc/quote/project/QuoteProjectTable";
  import QuoteProductTable from "@/views/ebc/quote/product/QuoteProductTable.vue";
  import SdContractTable from "@/views/ebc/sd/SdContractTable.vue";
  import SdSalesDetailTable from "@/views/ebc/sd/SdSalesDetailTable.vue";
  import SdSalesReturnTable from "@/views/ebc/sd/SdSalesReturnTable.vue";
  import {hasPermissionTab} from "@/utils/util";

  export default {
    name: "CustomerDetail",
    components: {
      QuoteProjectTable,
      PageLayout,
      DetailList,
      DetailListItem,
      MdmCustomerContactsTable,
      QuoteProductTable,
      SdContractTable,
      SdSalesDetailTable,
      SdSalesReturnTable
    },
    mixins: [mixinDevice],
    data() {
      return {
        headContent: {},
        defaultActiveKey: '1',
        tradeStatusVisible: false,
        tradeStatusConfirm: false,
        headContentColumns: [
          {
            title: '客户级别',
            dataIndex: 'custLevel_dictText',
            len: 7,
          },
          {
            title: '客户来源',
            dataIndex: 'custSource_dictText',
          },
          {
            title: '负责人',
            dataIndex: 'owner_dictText',
          },
          {
            title: '销售区域',
            dataIndex: 'custSaleArea',
          },
        ],
        headExtraColumns: [
          {
            title: '成交状态',
            dataIndex: 'tradeStatusCode_dictText',
          },
          {
            title: '注册资金',
            dataIndex: 'custRegistCapital',
          },
        ],
        url: {
          list: "/mdm/customer/list",
          edit: "/mdm/customer/edit",
          delete: "/mdm/customer/delete",
        },
        logo: require('@/views/mdm/assets/客户图标.png'),
        pcaData: '',
      }
    },
    created() {
      this.pcaData = new Area()
    },
    methods: {
      edit(record) {
        this.headContent = record;
      },
      handleEdit: function (record) {
        this.$emit('edit', record);
      },
      handleDelete: function (id) {
        this.$emit('del', id);
      },
      callback(key){
      },
      changeTradeStatus(){
        this.tradeStatusVisible = true;
      },
      submitTradeStatus(){
        const that = this;
        that.tradeStatusConfirm = true;
        putAction(this.url.edit, {id: this.headContent.id, tradeStatusCode: this.headContent.tradeStatusCode}).then((res)=>{
          if(res.success){
            that.$message.success(res.message);
          }else{
            that.$message.warning(res.message);
          }
        }).finally(() => {
          that.tradeStatusConfirm = false;
        })
        this.tradeStatusVisible = false;
        this.$emit('tradeStatusOk', this.headContent.id);
      },
      handleCancelTradeStatus(){
        this.tradeStatusVisible = false;
      },
      uploadFile(newFileList){
        if(!this.headContent.id){
          this.$message.warning('数据异常，ID不存在')
          return;
        }
        putAction(this.url.edit,{id: this.headContent.id, file: newFileList}).then((res)=>{
          if(res.success){
            this.$message.success("成功！");
          }else{
            this.$message.warning(res.message);
          }
        })
      },
      hasPermissionTab(val){
        return hasPermissionTab(val);
      }
    },
  }
</script>

<style lang="less" scoped>

  .detail-layout {
    margin-left: 2px;
  }

  .text {
    color: rgba(0, 0, 0, .45);
    text-align: center;
  }

  .contentText {
    color: rgba(0, 0, 0, .45);
    font-size: 13px;
  }

  .heading {
    color: rgba(0, 0, 0, .85);
    font-size: 20px;
    text-align: center;
  }

  .contentHeading {
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
  }

  .no-data {
    color: rgba(0, 0, 0, .25);
    text-align: center;
    line-height: 64px;
    font-size: 16px;

    i {
      font-size: 24px;
      margin-right: 16px;
      position: relative;
      top: 3px;
    }
  }

  .mobile {
    .detail-layout {
      margin-left: unset;
    }

    .text {

    }

    .status-list {
      text-align: left;
    }

    .term {
      color: rgba(0,0,0,.85);
      display: table-cell;
      line-height: 20px;
      margin-right: 8px;
      padding-bottom: 16px;
      white-space: nowrap;

      &:after {
        content: ":";
        margin: 0 8px 0 2px;
        position: relative;
        top: -.5px;
      }
    }

    .content {
      color: rgba(0,0,0,.65);
      display: table-cell;
      line-height: 22px;
      padding-bottom: 16px;
      width: 100%;
    }

  }
</style>